<template>
  <el-dialog class="addbox" title="添加药品" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">

    <!-- 添加表单 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="药品编码" prop="id">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item>
      <el-form-item label="药品名称" prop="drugname">
        <el-input v-model="ruleForm.drugname"></el-input>
      </el-form-item>
      <el-form-item label="药品规格" prop="drugunit">
        <el-input v-model="ruleForm.drugunit"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="drugsinpr">
        <el-input v-model="ruleForm.drugsinpr"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="drugcount">
        <el-input v-model.number="ruleForm.drugcount"></el-input>
      </el-form-item>
    </el-form>


    <span slot="footer" class="dialog-footer">
      <el-button @click="closedrugInfo">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { addDrugApi } from '../../../api/detailApi'
export default {
  data() {
    var drugIdin = (rule, value, callback) => {
      if (value == '') {
        callback(new Error("药品编码不能为空！"));
      } else if (value.length < 7 || value.length > 8) {
        callback(new Error("请输入正确的药品编码！"));
      } else {
        callback()
      }
    }

    var drugcountfun = (rule, value, callback) => {
      if (!value) {
          return callback(new Error('数量不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 1) {
              callback(new Error('数量不能小于1'));
            } else {
              callback();
            }
          }
        }, 1000);
    }

    return {
      ruleForm: {
        id: '',
        drugname: '',//双向绑定一个对象的属性
        drugunit: '',
        drugcount: '',
        drugsinpr: '',
      },
      rules: {
        id: [
          { required: true, validator: drugIdin, trigger: 'blur' }
        ],
        drugname: [
          { required: true, message: '请输入药品名称', trigger: 'blur' },
          { min: 2, max: 500, message: '长度最少2个字符', trigger: 'blur' }
        ],
        drugunit: [
          { required: true, message: '请输入药品规格', trigger: 'blur' },
          { min: 1, max: 500, message: '长度最少1个字符', trigger: 'blur' }
        ],
        drugsinpr:[
          { required: true, message: '请输入单价', trigger: 'blur' },
          { min: 1, max: 500, message: '长度最少1个字符', trigger: 'blur' }
        ],
        drugcount:[
          { required: true, validator: drugcountfun, trigger: 'blur' }
        ]
      },
      dialogVisible: true  //控制显隐
    };
  },
  methods: {
    closedrugInfo() {
      this.$emit('closeparInfo')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.closedrugInfo()
        })
        .catch(_ => { });
    },
     submitForm(formName) {//提交方法
        this.$refs[formName].validate((valid) => {
          if (valid) {//valid如果是true 验证通过 false 不通过
          //发送请求 获取form的值 发送给后端 通知前端 添加成功 刷新表格 关闭弹框
            addDrugApi(this.ruleForm).then(res=>{
              console.log('res',res);
              if(res.code == 200){
                this.$emit('resetdruglist') //刷新
                this.$emit('closeparInfo')  //关闭
              }
            })
            // console.log(this.ruleForm);
            // alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
        });
      },
  }
}
</script>

<style lang="less" scope>
.addbox{
  input{
    width: 300px;
  }
}
</style>